<script setup lang="ts">
import { WebDiskEsApi } from '@/api/ai/webdiskes'
import type { TableColumn } from '@/components/ATable/types'
import { ElFormDialogInstance } from '@/components/AForm/data'
import type { ElFormItem } from '@/components/AForm/types'
import { ElTablePlusInstance } from '@/components/ATable/data'

const c = reactive<TableColumn[]>([
  {
    label: '链接名称',
    prop: 'name',
    useFilter: true,
    queryForms: [
      {
        prop: 'name',
        component: 'ElInput'
      }
    ]
  },
  {
    label: 'URL',
    prop: 'url'
  },
  {
    label: '用户名称',
    prop: 'username'
  },
  {
    label: 'SSL',
    prop: 'useSsl'
  },
  {
    label: '操作',
    slot: 'op'
  }
])
const form = ref<ElFormDialogInstance>()
const formConfig = reactive<ElFormItem[]>([
  {
    prop: 'name',
    component: 'ElInput',
    rules: [
      {
        required: true,
        message: '请输入链接名称'
      }
    ],
    label: '链接名称'
  },
  {
    prop: 'url',
    component: 'ElInput',
    rules: [
      {
        required: true,
        message: '请输入链接地址'
      }
    ],
    label: 'URL'
  },
  {
    prop: 'username',
    component: 'ElInput',
    rules: [
      {
        required: true,
        message: '请输入用户名称'
      }
    ],
    label: '用户名称'
  },
  {
    prop: 'password',
    component: 'ElInput',
    props: {
      type: 'password',
      'show-password': true
    },
    rules: [
      {
        required: true,
        message: '请输入账号密码'
      }
    ],
    label: '账号密码'
  },
  {
    prop: 'useSsl',
    component: 'ElSwitch',
    label: '启用Ssl'
  },
])
const table = ref<ElTablePlusInstance>()
</script>

<template>
  <div style="height: 100%; width: 100%">
    <el-table-plus
      ref="table"
      :auto-load="true"
      :load-function="WebDiskEsApi.getWebDiskEsPage"
      :columns="c"
      title="ES管理"
    >
      <template #tools>
        <div>
          <el-button type="primary" @click="form?.open('add')">新增</el-button>
        </div>
      </template>
      <template #op="{ row }">
        <div>
          <el-button link @click="form.open('update', row)">编辑</el-button>
          <el-button link type="danger">删除</el-button>
        </div>
      </template>
    </el-table-plus>
    <el-form-dialog
      ref="form"
      :form-items="formConfig"
      @ok="table?.reload()"
      :update-function="WebDiskEsApi.updateWebDiskEs"
      :add-function="WebDiskEsApi.createWebDiskEs"
    />
  </div>
</template>

<style scoped lang="scss"></style>
